<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>更换头像</span>
    </div>
    <!-- 内容区：放图片 -->
    <!-- 如果图片不是空，就使用选择的图片，如果url为空，就显示默认图片 -->
    <img :src="url" style="width: 350px; height: 350px; object-fit: cover" v-if="url" />
    <img
      src="@/assets/images/avatar.jpg"
      style="width: 350px; height: 350px; object-fit: cover"
      v-else
    />
    <!-- 两个按钮 -->
    <div class="btn">
      <el-button type="primary" icon="el-icon-plus" @click="clickFile">选择图片</el-button>
      <input type="file" name="" id="" style="display: none" ref="inputRef" @change="uploadImg" />
      <el-button type="success" icon="el-icon-cloudy" :disabled="url ? false : true" @click="upimg"
        >上传头像</el-button
      >
    </div>
  </el-card>
</template>

<script>
import { updatePicAPI } from '@/api/user'
export default {
  name: 'UserAvatar',
  data() {
    return {
      // 准备存放base64格式的字符串
      url: ''
    }
  },
  methods: {
    // 点击选择图片，触发文件的单击事件
    clickFile() {
      this.$refs.inputRef.click()
    },
    // 选择图片中的预览图片
    uploadImg(e) {
      // 预览图片方案一：
      // 不管是上传图片还是预览图片，都要先找到文件对象，file文件框就有一个文件对象(input.files[0])
      // 判断有没有选中图片，如果选中了图片则临时创建一个图片地址
      // if (e.target.files.length > 0) {
      //   const fileObject = e.target.files[0]
      //   // 根据文件对象创建一个临时的图片地址，然后图片的src设置为这个临时地址
      //   this.url = URL.createObjectURL(fileObject)
      // }
      // 预览图片方案二：
      // 拿到文件对象
      const fileObject = e.target.files[0]
      if (e.target.files.length > 0) {
        // 创建一个FileReader实例
        const fr = new FileReader()
        // 将文件对象放进readAsDataURL，生成一个base64格式的字符串，将结果放在fr.result中
        fr.readAsDataURL(fileObject)
        // 然后等图片加载完之后，将图片的地址给this.url,使用箭头函数的时候，this执行vue实例
        fr.addEventListener('load', () => {
          this.url = fr.result
        })
      } else {
        // 没有选择图片就恢复url为空
        this.url = ''
      }
    },
    // 上传头像
    async upimg() {
      // 发送请求，获取结果
      const { data: res } = await updatePicAPI(this.url)
      if (res.code === 0) {
        // 提示更换头像成功信息
        this.$message.success(res.message)
        // 更新之后，调用vuex的actios方法，再重新获取一下用户信息到vux中
        this.$store.dispatch('user/getUser')
      } else {
        // 提示更换头像失败信息
        this.$message.error(res.message)
      }
    }
  }
}
</script>

<style scoped>
.el-card /deep/ .el-card__header {
  font-size: 13px;
}

.btn {
  margin-top: 10px;
}
.btn /deep/ .el-button {
  font-size: 13px;
  object-fit: cover;
  margin-right: 10px;
}
</style>
